<template>
  <div class="externalContainerAdd">

    <div class="externalContainer">
      <split-vertical title="新增外部诉单信息"></split-vertical>
      <div class="innerCon">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单平台" prop="channelId" style="margin-top:20px">
                <el-select v-model="ruleForm.channelId" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in channelList"
                    :key="item.id"
                    :label="item.channelName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单公司" prop="companyId" style="margin-top:20px">
                <el-select v-model="ruleForm.companyId" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in companyList"
                    :key="item.id"
                    :label="item.companyName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客诉类型" required>
                <el-select v-model="ruleForm.complainType" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in exchangeGoods"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客诉原因" prop="complainReason">
                <el-select v-model="ruleForm.complainReason" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in complaintReason"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="解决方案" prop="complainSolution">
                <el-select v-model="ruleForm.complainSolution" placeholder="请选择"  size="medium" filterable allow-create clearable>
                  <el-option
                    v-for="item in solveList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单编号" prop="orderCode">
                <el-input v-model="ruleForm.orderCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="情况说明" prop="complainSituation">
                <el-input v-model="ruleForm.complainSituation"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="customerName">
                <el-input v-model="ruleForm.customerName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="customerContact">
                <el-input v-model="ruleForm.customerContact" oninput="this.value=this.value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="产生费用" prop="isCost">
                <el-radio-group v-model="ruleForm.isCost">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="客户地址" prop="customerAddress">
                <el-input v-model="ruleForm.customerAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row >
            <el-col :span="12">
              <el-form-item label="费用类型" prop="costType">
                <el-select v-model="ruleForm.costType" placeholder="请选择">
                  <el-option
                    v-for="item in costType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="责任方" prop="responsibleParty">
                <el-select v-model="ruleForm.responsibleParty" placeholder="请选择">
                  <el-option
                    v-for="item in ResponsibleParty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row >
            <el-col :span="12">
              <el-form-item label="额外赔偿" prop="extraCharges">
                <el-input v-model="ruleForm.extraCharges" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物流费用" prop="postageAssume">
                <el-input v-model="ruleForm.postageAssume" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="退货单号" prop="returnExpressCode">
                  <el-input v-model="ruleForm.returnExpressCode" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input   v-model="ruleForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" size="medium">提交</el-button>
            <el-button @click="cancelExternal('ruleForm')" size="medium">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import SplitVertical from "components/common/SplitVertical"
  import {localStorage} from "js/localStorage"
  export default {
    components:{
      SplitVertical
    },
    data() {
      return {
        ruleForm: {
          channelId:'',
          companyId:'',
          /** 客诉原因 */
          complainReason:'改地址',
          /** 客诉情况说明 */
          complainSituation:'',
          /** 客诉解决方案 */
          complainSolution:'已处理',
          /** 联系方式 */
          customerContact:'',
          /** 客户姓名 */
          customerName:'',
          customerAddress:'',
          /**客诉类型 **/
          complainType:"咨询",
          /**备注 **/
          remark:'',
          /** 客诉承担责任方(1:无 2:邮政 3:厂家) */
          responsibleParty:'无',
          /*是否产生费用*/
          isCost:false,
          /** 客诉费用类型(0:无 1:采购 2:物流 3:采购和物流) */
          costType:'无',
          //快递费用
          postageAssume:0,
          /** 客诉额外费用 */
          extraCharges:0,
          /** 客户退货物流单号 */
          returnExpressCode:'',
        },
        rules: {
          complainReason: [
            { required: true, message: '请输入客诉原因', trigger: 'blur' },
            { min: 2, max:20, message: '长度在 2 到 20个字符', trigger: 'blur' }
          ],
          complainSituation: [
            { required: true, message: '请输入情况说明', trigger: 'change' }
          ],
          customerName:[
            { required: true, message: '请输入姓名', trigger: 'change' }
          ],
          complainSolution:[
            { required: true, message: '请选择解决方案', trigger: 'change' }
          ],
          customerContact:[
            { required: true, message: '请输入联系方式', trigger: 'blur' },
            { min: 11, max:11, message: '请输入正确的手机号', trigger: 'blur' }
          ],
          customerAddress:[
            { required: true, message: '请输入地址', trigger: 'change' },
          ],
          complainType: [
          { required: true, message: '请选择客诉类型', trigger: 'change' }
          ],
            responsibleParty: [
            { required: true, message: '请选择责任方', trigger: 'change' }
          ],
            isCost: [
            {  required: true, message: '请至少选择一个产生费用', trigger: 'change' }
          ],
          costType:[
            { required: true, message: '请选择费用类型', trigger: 'change' }
          ],
          orderCode:[
            { required: true, message: '请输入订单编号', trigger: 'change' }
          ],
          channelId:[
            { required: true, message: '请选择一个订单平台', trigger: 'change' }
          ],
          companyId:[
            { required: true, message: '请选择一个订单公司', trigger: 'change' }
          ],
          extraCharges:[
            { required: true, message: '请输入额外赔偿的金额', trigger: 'change' }
          ],
          postageAssume:[
            { required: true, message: '请输入物流费用的金额', trigger: 'change' }
          ]

        },
        //客诉类型
        exchangeGoods:[
          {
            value:'0' ,
            label:"咨询",
          },{
            value:'1',
            label:'退货'
          },{
            value:'2',
            label:'换货'
          },{
            value:'3',
            label:'补发'
          }],
        //责任方
        ResponsibleParty:[
          {
            value:'1' ,
            label:"无",
          },{
            value:'2',
            label:'邮政'
          },{
            value:'3',
            label:'厂家'
          }],
        //费用类型
        costType:[
          {
            value :'0',
            label:"无"
          },
          {
            value:'1' ,
            label:"商品采购费",
          },{
            value:'2',
            label:'物流费'
          },
          {
            value:'3',
            label:'采购和物流费用'
          }],
        //客诉原因
        complaintReason:[
          {
            id:'1',
            value :'改地址',
            label:"改地址"
          },
          {
            id:'2',
            value:'改号码' ,
            label:"改号码",
          },
          {
            id:'3',
            value:'破损',
            label:'破损'
          },
          {
            id:'4',
            value:'缺货',
            label:'缺货'
          },
          {
            id:'5',
            value:'未发货',
            label:'未发货'
          },
          {
            id:'6',
            value:'质量',
            label:'质量'
          },
          {
            id:'7',
            value:'咨询',
            label:'咨询'
          },
          {
            id:'8',
            value:'限制发货',
            label:'限制发货'
          },
          {
            id:'9',
            value:'催货',
            label:'催货'
          },
           {
            id:'10',
            value:'丢件',
            label:'丢件'
          },
          {
            id:'11',
            value:'七天无理由退货',
            label:'七天无理由退货'
          }],
        //解决方案
        solveList:[
          {
            id:'1',
            value:'已处理',
            label:'已处理'
          },
          {
            id:'2',
            value:'线下补偿',
            label:'线下补偿'
          },
          {
            id:'3',
            value:'补发',
            label:'补发'
          },
          {
            id:'4',
            value:'退积分',
            label:'退积分'
          },
        ],
        companyList:[],
        channelList:[],
        userId:''
      };
    },
    created(){
      this.userId=localStorage.get("userID")
      this.init()
    },
    methods: {
      init(){
        this.getChannel()
        this.getCompany()
      },
      getChannel(){
        let succ=data=>{
          if(data.code=="OK"){
            this.channelList=data.data
          }else{
            this.$message.error(data.msg)
          }
        }
       this.api.channelAll({},succ)
      },
      cancelExternal(){
        this.$router.go(-1)
      },
      externalAdd(){
        if(this.ruleForm.complainType == "咨询"){
          this.ruleForm.complainType = '0'
        }
        if(this.ruleForm.responsibleParty == "无"){
          this.ruleForm.responsibleParty = '1'
        }
        if(this.ruleForm.costType =="无" ){
          this.ruleForm.costType = '0'
        }
        let parmas=this.ruleForm
        parmas['userId']=this.userId
        let success=data=>{
          if(data.code=="OK"){
            this.$message.success(data.msg)
            this.$router.go(-1)
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.externalComplainAdd(parmas,success)
      },
      getCompany(){
        let succ=data=>{
             if(data.code=="OK"){
                this.companyList=data.data
             }else{
               this.$message.error(data.msg)
             }
        }
       this.api.companyAll({},succ)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.externalAdd()
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style lang="scss" scoped>
.externalContainerAdd{
  .externalContainer{
    background: #fff;
    height:670px;
    padding:0 10px;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
    .innerCon{
      width:70%;
    }
    .el-input{
      width:70%;
    }

    .el-select{
      width:70%;
    }
  }
  .btn{
    width:100%;
    text-align: center;
  }

}
</style>
